$rows:3;
$columns:3;
$length:128;
$space:4;

@use "sass:math";
.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    border-radius: 2px;
    color: #fff;
}

.pics{
    padding: 2px;

    .pic{
        position: relative;
        float: left;
        margin: math.div($space,2) + px;
        width: ($length) + px;
        height: ($length) + px;
        cursor: pointer;
        background-color: #000;
        animation: small .5s ease-in-out both;
        transition: transform .5s ease-in-out,z-index 0s linear .5s;

        &.active{
            animation: big .5s ease-in-out both;
        }

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: opacity .5s ease-in-out;
        }

        &.away img{
            opacity: 0;
        }
    }

}

$left:0;
$right:0;
$row:1;
$col:1;
@for $i from 1 through ($rows * $columns){

    @if ($row * $columns) < $i{
        $row:$row + 1;
    }

    $col:$i - (($row - 1) * $columns);

    $left: math.div($col - 1, $columns - 1) * 100%;
    $top: math.div($row - 1, $rows - 1) * 100%;
    .pic-#{$i}{
        transform-origin: $left $top;
    }
}

@keyframes big {
    0%,1%{
        transform: scale(1);
        z-index: 2;
    }
    100%{
        z-index: 2;
        transform: scale(math.div($length * $rows + $space * ($rows - 1), $length));
    }
}

@keyframes small {
    0%{
        z-index: 2;
        transform: scale(3.0625);
    } 
    99%{
        transform: scale(1);
        z-index: 2;
    }
    100%{
        z-index: 1;
    }

}